<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>UserCenter</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/wangyeicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/current.css">
    <link rel="stylesheet" href="../../css/set_model.css">
    <style type="text/css">
        nav.shadow-sm {
            box-shadow: 0 0 2px rgba(0 , 0 , 0 , .5) !important;
        }
        section.mt-3 {
            margin-top: 0px !important;
        }
        section.mt-3 div.container {
            padding-top: 10px;
        }
        div.container div.shadow-sm {
            margin-bottom: 0px !important;
        }
    </style>
</head>

<body>
    <!-- 头部导航栏 -->
    <nav class="bg-white shadow-sm  sticky-top">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar p-3 navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">
                            <img src="../../images/logo1.png" class="img-fluid" style="max-width:80px;" alt="logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">组队广场</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" href="#">
                                        活动广场
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav ml-md-auto">
                                <li class="nav-item dropdown">
                                    <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href="#"
                                        id="bd-versions" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        发起<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor"
                                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z" />
                                        </svg>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                        <a class="dropdown-item " href="#">发起组队</a>
                                        <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="btn btn-primary nav-item" href="#">
                                        消息<span class="badge badge-light ml-2">8</span>
                                        <span class="sr-only">unread messages</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                        <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg"
                                            style="max-width: 50px">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                        <a class="dropdown-item " href="#">我的卡片</a>
                                        <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item btn btn-primary btn-lg logoff-btn" href="#"
                                            data-toggle="modal" data-target="#logoffModal">退出登陆</a>
                                    </div>

                                </li>
                            </ul>

                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
    <!-- 消息导航栏-->
    <section class="bg-white shadow-sm">
        <div class="container">
            <div class="nav-scroller bg-white">
                <nav class="nav nav-underline">
                    <li class="nav-link text-muted" href="#">消息中心</li>
                    <a class="nav-link text-muted">
                        未读
                        <span class="badge badge-pill bg-light align-text-bottom">27</span>
                    </a>
                    <a class="nav-link active" href="#">私信</a>
                    <a class="nav-link" href="#">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mouse" fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8V5a4 4 0 0 0-8 0v6a4 4 0 0 0 8 0zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
                        </svg>发送私信
                    </a>
                </nav>
            </div>
        </div>
    </section>

    <!-- 聊天记录 -->
    <section>
        <div class="container">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    共有 3 条与 <span class="text-primary">@username</span> 的聊天记录
                </h6>
                <div class="media text-muted pt-3">
                    <a href="#"><img src="../../images/logo.jpg" class="img-fluid rounded-circle shadow-sm"
                            style="width: 45px;"></a>
                    <p class="media-body pl-2 pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <strong class="d-block text-gray-dark pb-1">@username 对您说： <span class="text-muted small">未读</span></strong>
                        我想加入你们，如何？？
                        <small class="d-block pt-1">2020-10-2 12:00</small>
                        <small class="d-block pt-1 text-right" style="margin-top: -25px">
                            <a href="#" class="pl-2">删除</a>
                            <a href="#">举报</a>
                        </small>
                    </p>
                </div>
                <div class="media text-muted pt-3">
                    <a href="#"><img src="../../images/logo.jpg" class="img-fluid rounded-circle shadow-sm"
                            style="width: 45px;"></a>
                    <p class="media-body pl-2 pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <strong class="d-block text-gray-dark pb-1">@username 对您说：</strong>
                        我想加入你们，如何？？
                        <small class="d-block pt-1">2020-10-2 12:00</small>
                        <small class="d-block pt-1 text-right" style="margin-top: -25px">
                            <a href="#" class="pl-2">删除</a>
                            <a href="#">举报</a>
                        </small>
                    </p>
                </div>
                <div class="media text-muted pt-3">
                    <a href="#"><img src="../../images/logo.jpg" class="img-fluid rounded-circle shadow-sm"
                            style="width: 45px;"></a>
                    <p class="media-body pl-2 pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <strong class="d-block text-gray-dark pb-1">您 对 @username 说：</strong>
                        我想加入你们，如何？？
                        <small class="d-block pt-1">2020-10-2 12:00</small>
                        <small class="d-block pt-1 text-right" style="margin-top: -25px">
                            <a href="#" class="pl-2">删除</a>
                            <a href="#">举报</a>
                        </small>
                    </p>
                </div>

            </div>
        </div>
    </section>

    <!-- 消息发送框 -->
    <section class="mt-3">
        <div class="container">
            <div class="row">
                <div class="d-none d-lg-block col-md-1">
                    <img src="../../images/logo.jpg" class="rounded-circle img-fluid" style="max-width: 80px">
                </div>
                <div class="col-12 col-md-11 pl-4 set-pad">
                    <form>
                        <div class="form-group">
                            <textarea type="text" class="form-control" rows="3" id="inputAddress2"></textarea>
                        </div>
                    </form>
                    <button type="button" class="btn btn-primary occupied sent-btn" data-toggle="modal"
                    data-target="#sentMessageModal">发送</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 退出登录的模态框 -->
    <div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="prompt-text">点击"确定"退出账号</div>
                    <div class="bgimg_lf"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 发送消息的模态框 -->
    <!-- sent message -->
    <div class="modal fade" id="sentMessageModal" tabindex="-1" role="dialog" aria-labelledby="sentMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog dialog-sm">
            <div class="modal-content content-sm">
                <div class="modal-body body-sm">
                    <div class="prompt-text">成功发送消息</div>
                    <div class="bgimg_sm"></div>
                </div>
            </div>
        </div>
    </div>

    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.bundle.js"></script>
    <script src="../../js/textarea-autoheight.js"></script>
    <script>

        var textarea = document.getElementById('inputAddress2');
        makeExpandingArea(textarea);

        $(document).ready(function () {

            $(".sent-btn").on("click", function () {

                $("#sentMessageModal").modal('show');
                setTimeout("$('#sentMessageModal').modal('hide')", "1000");

            })

        });

    </script>
</body>

</html>